<template>
  <div class="settings">
    <h1>设置</h1>
    <div class="change-password">
      <h2>修改密码</h2>
      <form @submit.prevent="changePassword">
        <div>
          <label for="currentPassword">当前密码：</label>
          <input type="password" id="currentPassword" v-model.trim="currentPassword" required>
        </div>
        <div>
          <label for="newPassword">新密码：</label>
          <input type="password" id="newPassword" v-model.trim="newPassword" required minlength="8">
        </div>
        <button type="submit">修改密码</button>
      </form>
    </div>
    <div class="notification-settings">
      <h2>通知设置</h2>
      <form @submit.prevent="saveNotificationSettings">
        <div>
          <label for="emailNotifications">接收邮件通知：</label>
          <input type="checkbox" id="emailNotifications" v-model="receiveEmailNotification">
        </div>
        <div>
          <label for="smsNotifications">接收短信通知：</label>
          <input type="checkbox" id="smsNotifications" v-model="receiveSmsNotification">
        </div>
        <button type="submit">保存设置</button>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SettingsList',
  data() {
    return {
      currentPassword: '',
      newPassword: '',
      receiveEmailNotification: true,
      receiveSmsNotification: false
    }
  },
  methods: {
    changePassword() {
      if (this.newPassword.length < 8) {
        alert('新密码长度必须至少为8个字符');
        return;
      }
      console.log('密码修改请求', this.currentPassword, this.newPassword);
      // 这里可以添加实际发送请求的代码
      alert('密码已修改');
      this.currentPassword = '';
      this.newPassword = '';
    },
    saveNotificationSettings() {
      console.log('保存通知设置', this.receiveEmailNotification, this.receiveSmsNotification);
      // 这里可以添加实际发送请求的代码
      alert('通知设置已保存');
    }
  }
}
</script>

<style scoped>
.settings {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
  background-color: #f8f8f8;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.change-password,
.notification-settings {
  margin-top: 20px;
  padding: 20px;
  background-color: white;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

label {
  font-weight: bold;
  display: block;
  margin-bottom: 5px;
}

input[type="password"],
input[type="checkbox"],
button {
  margin-bottom: 10px;
}

input[type="checkbox"] {
  margin-right: 10px;
}
</style>
